<template>
    <div>
        <div>
            <h1>1. 声明式渲染</h1>
            <p>{{ counter.count }}</p>
            <p>{{ message }}</p>
        </div>
        <div>
            <h1>2.Attribute 绑定,也就是那些v-bind命令</h1>
            <p :class="['main', { title: titleClass == 1 }]">这个是使用了v的模式修改样式</p>
        </div>
        <div>
            <h1>3. 事件监听</h1>
            <button @click="increment" class="22">按虐：{{ cout }}</button>
        </div>
        <div>
            <h1>4.表单绑定</h1>
            <input type="text" :value="text" @input="onInput" placeholder="moren">
            <p>{{ text }}</p>
            <input type="text" v-model="textt">
            <p>{{ textt }}</p>
        </div>
        <div>
            <h1>列表渲染</h1>
            <form @submit.prevent="addTodo">
                <input type="text" v-model="newTodo">
                <button>add Todo</button>
            </form>
            <ul>
                <li v-for="todo in todos" :key="todo.id">{{ todo.text }}
                    <button @click="removeTodo(todo)">X</button>
                </li>
            </ul>
            <button @click="hand">
                {{ active?'Show all': 'Hide completed' }}
            </button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
// 第一个案例
const counter = reactive({
    count: 2
})
const message = ref("heee")
const titleClass = ref(0)
const cout = ref(0)

const increment = () => {
    cout.value++
    // 拿到了当前的class的值
    // console.log(e.target?.className);
}
const text = ref('')
function onInput(e: InputEvent) {

    // v-on 处理函数会接收原生 DOM 事件
    text.value = e.target?.value
}
const textt = ref();
let id = 0;
const newTodo = ref('');
const todos = ref([
    { id: id++, text: 'lea', done: true },
    { id: id++, text: 'leavce', done: true },
    { id: id++, text: 'leave' }
])
const addTodo = () => {
    todos.value.push({ id: id++, text: newTodo.value })
    newTodo.value = ''

}
const removeTodo = (todo: any) => {
    console.log(todo);

    todos.value = todos.value.filter((t) => t !== todo)


}
const active = ref(false)
const hand = () => {
    active.value = !active.value
}

</script>
<style scoped>
.main {
    height: 50px;
    border: 1px solid blue;
}

.title {
    color: red;
}
</style>